<template>
  <el-row class="login-container">
    <el-col
      :md="12"
      :lg="16"
      class="left"
    >
      <div>
        <div class="font-bold text-5xl text-light-50 mb-4">欢迎光临</div>
        <div class="text-gray-200 text-sm">
          丁杰做的《vue3+vite后台开发》在线演示
        </div>
      </div>
    </el-col>
    <el-col
      :md="12"
      :lg="8"
      class="bg-light-50 left flex-col"
    >
      <h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2>
      <div
        class="flex items-center justify-center my-5 text-gray-300 space-x-2"
      >
        <span class="h-[1px] w-16 bg-gray-200"></span>
        <span>账号密码登录</span>
        <span class="h-[1px] w-16 bg-gray-200"></span>
      </div>

      <el-form
        ref="formRef"
        :rules="rules"
        :model="form"
        class="w-[250px]"
      >
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
          >
            <template #prefix>
              <el-icon class="el-input__icon">
                <User />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!--
          show-password 密码的眼睛
        -->
        <el-form-item prop="password">
          <el-input
            type="password"
            show-password
            v-model="form.password"
            placeholder="请输入密码"
          >
            <template #prefix>
              <el-icon class="el-input__icon">
                <Lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            round
            color="#626aef"
            :loading="loading"
            class="w-[250px]"
            type="primary"
            @click="onSubmit"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { toast } from "~/composables/util.js";
import { useRouter } from "vue-router"; // useRouter是vue-router里面的一个方法
import { useStore } from "vuex";

const router = useRouter();
const store = useStore();

// 定义form
const form = reactive({
  username: "",
  password: "",
});

// 验证规则
const rules = {
  username: [
    { required: true, message: "用户名不能为空", trigger: "blur" },
    // 长度在3-5之间
    // { min: 3, max: 5, message: '用户名长度必须是3-5个', trigger: 'blur' }
  ],
  password: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
};

const formRef = ref(null);
const loading = ref(false);

const onSubmit = () => {
  loading.value = true; // 按钮上的加载效果
  console.log("submit!");
  formRef.value.validate((valid) => {
    if (!valid) {
      return false;
    }
    console.log("验证通过");
    console.log(form.username, form.password);
    store
      .dispatch("login", form)
      .then((res) => {
        toast("登录成功");
        router.push("/");
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

// 监听回车事件
function onKeyUp(e) {
  console.log(e);
  if (e.key == "Enter") onSubmit();
}

// 添加键盘监听
onMounted(() => {
  // 页面加载完毕调用这个注册事件
  document.addEventListener("keyup", onKeyUp);
});

// 页面卸载之前移除键盘监听
onBeforeUnmount(() => {});
</script>

<style>
.login-container {
  @apply min-h-screen bg-indigo-500;
  /*必须加分号*/
}

.login-container .left {
  @apply flex items-center justify-center;
}
</style>
